import {React, useState } from 'react';

import './ManagePlan.css';
import 'tailwindcss';
import { Layout, Menu, Button, Col, Row, Grid, Badge,Space, Flex, Radio,Switch, Tag } from 'antd';
import {
    LeftCircleOutlined,
    CheckOutlined
} from '@ant-design/icons';
const { Header, Content, Footer } = Layout;
const prices = [
  { info: [
    {title: 'Entry', price: '',unit: 'month', save: 'Save 25%', remark: '$3,588 Billed annually', btnTxt: 'Accelerate', list: [{title: '5 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Intermediate', price: '',unit: 'month', save: 'Save 25%', remark: '$8,988 Billed annually', btnTxt: 'Accelerate', list: [{title: '20 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Advanced', price: '',unit: 'month', save: 'Save 25%', remark: '$17,988 Billed annually', btnTxt: 'Accelerate', list: [{title: '50 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    {title: 'Advanced', price: 'Custom',unit: '', save: '', remark: '', btnTxt: 'Contact Sales', list: [{title: '100+ TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
] },
  {
    info: [
      {title: 'Trial', price: '$0',unit: '/month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '1 TX per 10 sec '}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Entry', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '5 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Intermediate', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '20 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
      {title: 'Advanced', price: '',unit: 'month', save: '', remark: '', btnTxt: 'Accelerate', list: [{title: '50 TPS'}, {title: 'Dedicated SWQoS'}, {title: 'Anti-MEV'}, {title: '0.001 SOL Tip'}]},
    ]
  }
];

const ManagePlan = () => {
    const headerStyle = {
        color: '#fff',
        height: 114,
        paddingInline: 61,
        lineHeight: '114px',
        backgroundColor: '#141E20',
      };
  const [activePrice, setActivePrice] = useState(2);
  const [currentPrice, setCurrentPrice] = useState(prices[1]);
  
  const handlePrice = (index) => {
    setActivePrice(index);
    setCurrentPrice(prices[index - 1]);
  }
  return (
    <Layout>
      <Content style={{ 
        backgroundColor: '#141E20',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh'
      }}>
        <Header style={headerStyle}>
            <div className='memberHeader'>
                <div className='name'><a href="/"><img src='../public/images/LOGO1.svg' /></a></div>
                <div className='info'>
                    Balance: <span>$0.00</span> USDC
                    <img src='../../public/images/memberRobot.svg' />
                    <div className='robotName'>U</div>
                </div>
            </div>
        </Header>
        <div className='manageBack'><LeftCircleOutlined style={{color: '#31F045', fontSize: 48}} onClick={()=>{location.href = '/MemberInfo'}} /></div>
        <div className='manageTitle'>Manage your Plan</div>
        <div className='manageSubTitle'>
        Upgrade, downgrade, or cancel your plan at any time. Changes will take effect at the start of your next billing cycle.
        </div>
        <div className='priceBtn1'>
          <div className='btnList'>
                <div className={activePrice == 1 ? 'pbtn active' : 'pbtn'} onClick={()=>handlePrice(1)}>
                  <div>Annual</div>
                  <div className='secBtn'>Best Value</div>
                </div>
                <div className={activePrice == 2 ? 'pbtn active' : 'pbtn'} onClick={()=>handlePrice(2)}>
                  Monthly
                </div>
          </div>
        </div>
        <div className='priceList1'>
          {
            currentPrice.info.map((item, index)=>(
              <div className='priceBox' key={index}>
                <div className='name'>{item.title}</div>
                  <div className='price'>
                    <div>{item.price}<span>{item.unit == '' ? '' : item.unit}</span></div>
                    {item.save == '' ? '' : <div className='saveRate'>{item.save}</div>}
                  </div>
                  {item.remark == '' ? '' : <div className='remark'>{item.remark}</div>}
                  <Button style={{
                    color: '#000000',
                    backgroundColor: '#31F045'
                  }}>{item.btnTxt}</Button>
                  {
                    item.list.map((it,i)=>(
                    <div className='list' key={i}>
                      <Tag icon={<CheckOutlined style={{color: '#31F045'}} />} color="#000000">{it.title}</Tag>
                    </div>
                    ))
                  }
                </div>
            ))}
        </div>
      </Content>
    </Layout>
  );
};
export default ManagePlan;